<template>
  <div class="header">
      <div class="left iconfont">
          <!-- <i class="iconfont arrow-down"></i> -->
          &#xe685;
        </div>
      <div class="search iconfont">
        <div class="search_icon">&#xe67d;</div>
        <div class="search_input"><input type="text"></div>
      </div>
      <div class="add iconfont" @click="toCity()">北京&#xe665;</div>
  </div>
</template>

<script>
export default {
  methods:{
    toCity(){
      this.$router.push('/city')
    }
  }
};
</script>

<style lang="stylus" scoped>
.header 
    width 100%
    height 0.7rem
    background-color skyblue
    display inline-flex
    justify-content space-around
    align-items center
.search
    width 75%
    height 70%
    // background-color orange
    border-radius 30px
    overflow hidden
    display inline-flex
    justify-content center
    align-items center
.search_icon 
    width 15%
    height 100%
    display inline-flex
    justify-content center
    align-items center
    background-color #fff
.search_input
    width 85%
    height 100%
    display inline-flex
    justify-content center
    align-items center
    input
      width 100%
      height 100%
      border 0px solid gray
      outline none
</style>



